<template>
  <div>
    <h1>App</h1>
    <h2>v3</h2>

    info.age <button @click="info.age++">{{ info.age }}</button>

    <hr>
    user.age <button @click="user.age.value++">{{ user.age }}</button>
  </div>
</template>

<script setup>
import { reactive, ref, toRefs } from "vue";

const info = reactive({
  name: 'jack',
  age: 20,
  size: {
    w: 100,
    h: 200
  }
});
// const user = {
//   name: ref('jack'),
//   age: ref(20),
//   size: ref({ w: 100, h: 200 })
// };
const user = toRefs(info);
console.log(user.name.value);
console.log(user.age.value);
console.log(user.size.value);


setTimeout(() => {
  user.age.value++;
}, 3000);




</script>